---
title: Theming and customizing styles
sidebar_label: Theming
sidebar_position: 3
---

import Prefixes from '!!raw-loader!../examples/Theming/Prefixes';
import Variants from '!!raw-loader!../examples/Theming/Variants';

Generally, if you stick to the Bootstrap defined classes and variants,
there isn't anything you need to do to use a custom theme with
React-Bootstrap. It just works. But we also make coloring outside the
lines easy to do.

## New variants and sizes

Custom variants and sizes should follow the pattern of the default
Bootstrap variants, and define css classes matching:
`component-*`. React-Bootstrap builds the component
`classNames` in a consistent way that you can rely on. For
instance this custom `Button`.

<CodeBlock language="jsx" live>
  {Variants}
</CodeBlock>

## Prefixing components

In some cases you may need to change the base class "prefix" of one or
more components. You can control how a component prefixes its classes
locally by changing the `bsPrefix` prop or globally via the
`ThemeProvider` component.

:::caution

Changing prefixes is an escape hatch and generally shouldn't be used.

:::

<CodeBlock language="jsx" live>
  {Prefixes}
</CodeBlock>
